<template>
  <div class="pwd-panel">
    <div class="pwd-hearder flex-between">
      <div class="logo-contanier flex-column flex-y-center">
        <img src="../../../common/assets/images/kangni_logo3.jpg" />
        <!-- <span>SRM供应商管理云平台</span> -->
      </div>
      <div class="account-container flex-row">
        <el-link type="info" :underline="false" class="has-account">{{ $t('login.hasAccount') }}</el-link>
        <el-link :underline="false" style="color: #fff"
          >{{ $t('login.loginIn') }}<i class="el-icon-caret-right"></i>
        </el-link>
      </div>
    </div>

    <div class="pwd-content">
      <x-sub-page :isShowBack="true" :content="title" @goBack="goBack">
        <el-form
          class="user-form"
          :model="userForm"
          :hide-required-asterisk="true"
          ref="ruleFormRef"
          :rules="rules"
          label-position="top"
          @submit.native.prevent
        >
          <el-form-item :label="$t('login.firmName')" prop="fullName">
            <el-input
              v-model="userForm.fullName"
              auto-complete="off"
              maxlength="50"
              :placeholder="$t('login.firmNamePlaceholder')"
              type="text"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('login.allCreditCode')" prop="taxId">
            <el-input
              v-model="userForm.taxId"
              auto-complete="off"
              maxlength="50"
              :placeholder="$t('login.allCreditCodePlaceholder')"
              type="text"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item :label="$t('login.name')" prop="userName">
            <el-input
              v-model="userForm.userName"
              auto-complete="off"
              :placeholder="$t('login.namePlaceholder')"
              type="text"
              maxlength="50"
              clearable
            />
          </el-form-item> -->
          <el-form-item :label="$t('login.moblie')" prop="mobile">
            <el-input
              v-model="userForm.mobile"
              auto-complete="off"
              :placeholder="$t('login.phonePlaceholder')"
              type="text"
              maxlength="11"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('login.verificationCode')" prop="captcha">
            <x-code-input
              ref="codeInput"
              v-model="userForm.captcha"
              :type="'moblie'"
              :isRandom="false"
              @refreshCode="getAuthCode"
              @handleEnter="onSubmit()"
              :placeholder="$t('login.moblieCode')"
            />
          </el-form-item>
          <el-form-item :label="$t('login.newPwd')" prop="newPwd">
            <el-input
              v-model="userForm.newPwd"
              auto-complete="off"
              :placeholder="$t('login.pwdRule')"
              type="password"
              onpaste="return false"
              oncontextmenu="return false"
              oncopy="return false"
              oncut="return false"
              @keyup.enter.native="onSubmit()"
            />
          </el-form-item>
          <el-form-item :label="$t('login.confirmPwd')" prop="password">
            <el-input
              v-model="userForm.password"
              onpaste="return false"
              oncontextmenu="return false"
              oncopy="return false"
              oncut="return false"
              auto-complete="off"
              :placeholder="$t('login.confirmPwdText')"
              type="password"
              @keyup.enter.native="onSubmit()"
            />
          </el-form-item>
          <el-form-item label-width="76px">
            <el-button type="primary" :loading="loading" size="medium" style="width: 100%" @click.prevent="onSubmit()">
              {{ $t('login.register') }}
            </el-button>
          </el-form-item>
        </el-form>
      </x-sub-page>
      <div class="footer-link"> </div>
    </div>
  </div>
</template>
<script>
  import { throttle, checkMobilePhone, checkPwd, encrypt } from '@package/utils'
  import { apiGetMobileCode, apiPostRegister } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'Register',
    data() {
      return {
        title: this.$t('login.supplierRegister'),
        userForm: {
          fullName: '',
          taxId: '',
          captcha: '',
          captchaKey: '',
          mobile: '',
          newPwd: '',
          password: '',
          userName: ''
        },
        rules: {
          mobile: [
            { required: true, trigger: 'blur', message: this.$t('login.phonePlaceholder') },
            { validator: this.validatePhone, trigger: 'blur' }
          ],
          fullName: [{ required: true, trigger: 'blur', message: this.$t('login.firmNamePlaceholder') }],
          userName: [{ required: true, trigger: 'blur', message: this.$t('login.namePlaceholder') }],
          taxId: [{ required: true, trigger: 'blur', message: this.$t('login.allCreditCodePlaceholder') }],
          captcha: [
            { required: true, trigger: 'blur', message: this.$t('login.codePlaceholder') },
            { validator: this.checkMobliedCode, trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: this.$t('login.enterPassword'), trigger: 'blur' },
            { min: 6, max: 50, message: this.$t('login.pwdLengthPlaceholder'), trigger: 'blur' },
            { validator: this.validatePwd, trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('login.enterPassword'), trigger: 'blur' },
            { validator: this.validateConfimPwd, trigger: 'blur' }
          ]
        },
        loading: false
      }
    },
    methods: {
      getAuthCode() {
        this.$refs.ruleFormRef.validateField('mobile', (valid) => {
          if (!valid) {
            const formData = new FormData()
            formData.append('mobile', this.userForm.mobile)
            this.$refs.codeInput.refreshTimes()
            apiGetMobileCode(formData).then(({ data }) => {
              // this.$message.success(this.$t('login.sendSuccess'))
              this.$message.success(data.captcha)
              this.verificationCode = data.captcha
              this.userForm.captchaKey = data.captchaKey
            })
          }
        })
      },
      validatePhone(rule, value, callback) {
        if (value && value !== '' && !checkMobilePhone(value)) {
          callback(new Error(this.$t('login.pleasePhoneRight')))
        } else {
          callback()
        }
      },
      validatePwd(rule, value, callback) {
        if (value && value !== '' && !checkPwd(value)) {
          callback(new Error(this.$t('login.passwordMode')))
        } else {
          callback()
        }
      },
      validateConfimPwd(rule, value, callback) {
        if (value && value !== '' && value !== this.userForm.newPwd) {
          callback(new Error(this.$t('login.confirmPwdTips')))
        } else {
          callback()
        }
      },
      /**
       * @param codeForm - 重设密码
       * 提交表单
       */
      onSubmit: throttle(function () {
        this.loading = true
        this.$refs.ruleFormRef.validate(async (valid, error) => {
          if (valid) {
            this.loading = true
            // const formData = new FormData()
            // formData.append('mobile', this.userForm.mobile)
            // formData.append('captcha', this.userForm.captcha)
            // formData.append('password', encrypt(this.userForm.password))
            // formData.append('captchaKey', this.userForm.captchaKey)
            const _par = {
              fullName: this.userForm.fullName,
              taxId: this.userForm.taxId,
              password: encrypt(this.userForm.password),
              // userName: this.userForm.userName,
              mobile: this.userForm.mobile,
              captchaKey: this.userForm.captchaKey,
              captcha: this.userForm.captcha
            }
            try {
              const { code } = await apiPostRegister(_par)
              if (code === EnumApiCode.Success) {
                this.loading = false
                this.$router.push({ path: '/registerSuccess', query: { account: this.userForm.mobile } })
              }
            } finally {
              this.loading = false
            }
          } else {
            this.getAuthCode()
            this.loading = false
          }
        })
      }, 1000),
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.pwd-panel .x-sub-page-container {
    width: 60%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  @import '../style/login';
</style>
